<template>
  <div>
    <Collapse simple>
      <Panel name="1">
        <span> 查询 </span>                                                                                          
        <p slot="content">                                                                                         
          <Row :gutter="16">                                                                                       
            <Col :xs="12" :sm="8" :md="8" :lg="6">                                                           
              <Input>                                                                                                
                <span slot="prepend">RepoId</span>                                      
              </Input>                                                                                               
            </Col>                                                                                                   
            <Col :xs="12" :sm="8" :md="8" :lg="6">                                                           
              <Input>                                                                                                
                <span slot="prepend">UserId</span>                                      
              </Input>                                                                                               
            </Col>                                                                                                   
            <Col :xs="12" :sm="8" :md="8" :lg="6">                                                           
              <Input>                                                                                                
                <span slot="prepend">Mode</span>                                      
              </Input>                                                                                               
            </Col>                                                                                                   
          </Row>                                                                                                     
                                                                                                                     
          <Row :gutter="16" class="btngrop">                                                                     
            <Button type="success" icon="ios-search">查询</Button>                                               
            <Button type="primary" icon="md-refresh" class="ml10">重置</Button>                                
          </Row>                                                                                                     
        </p>                                                                                                         
      </Panel>                                                                                                       
    </Collapse>                                                                                                      
                                                                                                                     
    <div class="card">                                                                                             
      <div class="mb10">                                                                                           
        <Button type="success" @click="addFrom">添加</Button>                                                    
      </div>                                                                                                         
      <Table                                                                                                         
        border                                                                                                       
        :columns="tablecolumns"                                                                                    
        :data="tabledata"                                                                                          
        :loading="loading"                                                                                         
        :show-header="true"                                                                                        
        :show-context-menu="true"                                                                                  
        @on-row-dblclick="dblclick"                                                                                
      >                                                                                                              
        <template slot-scope="{ row, index }" slot="action">                                                     
          <Tooltip content="查看" placement="bottom-start" :transfer="true">                                   
            <Button size="small" @click="dblclick(row)"                                                        
              ><Icon type="md-eye"                                                                                 
            /></Button>                                                                                              
          </Tooltip>                                                                                                 
                                                                                                                     
          <Tooltip content="编辑" placement="bottom-start" :transfer="true">                                   
            <Button                                                                                                  
              type="primary"                                                                                       
              size="small"                                                                                         
              class="ml5"                                                                                          
              @click="editFrom(index)"                                                                             
              ><Icon type="md-create"                                                                              
            /></Button>                                                                                              
          </Tooltip>                                                                                                 
                                                                                                                     
          <Tooltip content="删除" placement="bottom-start" :transfer="true">                                   
            <Poptip :transfer="true" :confirm="true" @on-ok="remove(index)">                                   
              <Button type="error" size="small" class="ml5"                                                    
                ><Icon type="md-trash"                                                                             
              /></Button>                                                                                            
              <div slot="title"><i>确定删除吗?</i></div>                                                           
              <div slot="content">                                                                                 
                <a @click="remove(index)">删除</a>                                                                 
              </div>                                                                                                 
            </Poptip>                                                                                                
          </Tooltip>                                                                                                 
        </template>                                                                                                  
      </Table>                                                                                                       
      <br />                                                                                                         
      <Page                                                                                                          
        :total="totals"                                                                                            
        :page-size="pageSize"                                                                                      
        show-sizer                                                                                                   
        show-total                                                                                                   
        show-elevator                                                                                                
        @on-change="changePage"                                                                                    
        @on-page-size-change="onSize"                                                                              
        :page-size-opts="[15, 25, 50, 80]"                                                                         
      />                                                                                                             
    </div>                                                                                                           
    <EditModal                                                                                                       
      :baseuri="baseuri"                                                                                           
      :title="mprops.title"                                                                                        
      :isshowmodal="showmodal"                                                                                     
      :index="mprops.index"                                                                                        
      :hidefooter="mprops.hidefooter"                                                                              
      :width="mprops.width"                                                                                        
      :keyId="mprops.keyId"                                                                                        
      :tablekey="tablekey"                                                                                        
      @on-close="modalCancel"                                                                                      
    ></EditModal>                                                                                                    
  </div>                                                                                                             
</template>                                                                                                          
                                                                                                                     
<script>                                                                                                             
import axios from "@/libs/api.request";                                                                            
import EditModal from "./CollaborationEdit"; // 数据源列表                                                              
export default {                                                                                                     
  components: { EditModal },                                                                                         
  data() {                                                                                                           
    return {                                                                                                         
      baseuri: "/api/Collaboration",                                                                                    
      currentPage: 1,                                                                                                
      pageSize: 15,                                                                                                  
      totals: 0,                                                                                                     
                                                                                                                     
      loading: false,                                                                                                
      tabledata: [],                                                                                                 
      tablekey: "Id",                                                                                              
      tablecolumns: [                                                                                                
        { title: "序号", type: "index", width: 65, align: "center" },                                          
        { title: "RepoId", key: "RepoId", minWidth: 95, resizable:true, tooltip: true },                                                                      
        { title: "UserId", key: "UserId", minWidth: 95, resizable:true, tooltip: true },                                                                      
        { title: "Mode", key: "Mode", minWidth: 95, resizable:true, tooltip: true },                                                                      
        {                                                                                                            
          title: "操作",                                                                                           
          slot: "action",                                                                                          
          fixed: "right",                                                                                          
          width: 140,                                                                                                
          align: "center",                                                                                         
        },                                                                                                           
      ],                                                                                                             
                                                                                                                     
      showmodal: false,                                                                                              
      mprops: {                                                                                                      
        title: "",                                                                                                 
        hidefooter: false,                                                                                           
        keyId: "",                                                                                                 
        index: -1,                                                                                                   
      },                                                                                                             
    };                                                                                                               
  },                                                                                                                 
  created() {                                                                                                        
    this.initdata();                                                                                                 
  },                                                                                                                 
  inject: ["reload"],                                                                                              
  methods: {                                                                                                         
    exportCsv(params) {                                                                                              
      this.$refs.tablesMain.exportCsv(params);                                                                       
    },                                                                                                               
    dblclick(row) {                                                                                                  
      this.showmodal = true;                                                                                         
      this.mprops.title = "查看";                                                                                  
      this.mprops.hidefooter = true;                                                                                 
      this.mprops.keyId = row[this.tablekey];                                                                        
    },                                                                                                               
    changePage(page) {                                                                                               
      if (this.currentPage != page) {                                                                                
        this.currentPage = page;                                                                                     
        this.$emit("update:current", page);                                                                        
        this.$emit("on-change", page);                                                                             
        this.initdata();                                                                                             
      }                                                                                                              
    },                                                                                                               
    onSize(pageSize) {                                                                                               
      this.pageSize = pageSize;                                                                                      
      this.$emit("on-page-size-change", pageSize);                                                                 
      this.changePage(1);                                                                                            
      this.initdata();                                                                                               
    },                                                                                                               
    addFrom() {                                                                                                      
      this.showmodal = true;                                                                                         
      this.mprops.hidefooter = false;                                                                                
      this.mprops.title = "新增";                                                                                  
      this.mprops.keyId = null;                                                                                      
    },                                                                                                               
    editFrom(index) {                                                                                                
      this.showmodal = true;                                                                                         
      this.mprops.title = "编辑";                                                                                  
      this.mprops.hidefooter = false;                                                                                
      this.mprops.index = index;                                                                                     
      this.mprops.keyId = this.tabledata[index][this.tablekey];                                                      
    },                                                                                                               
    remove(index) {                                                                                                  
      axios                                                                                                          
        .request({                                                                                                   
          url: `${this.baseuri}?${this.tablekey}=` + this.tabledata[index][this.tablekey],                                         
          method: "delete",                                                                                        
        })                                                                                                           
        .then((res) => {                                                                                             
          if (res.data.code === 200) {                                                                               
            this.tabledata.splice(index, 1);                                                                         
          } else {                                                                                                   
            this.$Message.error({                                                                                    
              content: res.data.msg,                                                                                 
              duration: 2,                                                                                           
              closable: true,                                                                                        
              onClose: () => {                                                                                       
                this.btnloading = false;                                                                             
              },                                                                                                     
            });                                                                                                      
          }                                                                                                          
        })                                                                                                           
        .catch((error) => {                                                                                          
          console.log(error);                                                                                        
        })                                                                                                           
        .finally((x) => {                                                                                            
          this.loading = false;                                                                                      
        });                                                                                                          
    },                                                                                                               
    initdata() {                                                                                                     
      this.loading = true;                                                                                           
      axios                                                                                                          
        .request({                                                                                                   
          url: `${this.baseuri}/query`,                                                                              
          method: "post",                                                                                          
          data: {                                                                                                    
            page: this.currentPage,                                                                                  
            pageSize: this.pageSize,                                                                                 
          },                                                                                                         
        })                                                                                                           
        .then((res) => {                                                                                             
          if (res.data.data.data == null) {                                                                       
          this.tabledata = [];                                                                       
          this.totals = 0;                                                                       
          } else {                                                                       
          this.tabledata = res.data.data.data;                                                                       
          this.totals = res.data.data.total;                                                                         
          }                                                                         
        })                                                                                                           
        .catch((error) => {                                                                                          
          console.log(error);                                                                                        
        })                                                                                                           
        .finally((x) => {                                                                                            
          this.loading = false;                                                                                      
        });                                                                                                          
    },                                                                                                               
    modalCancel(data) {                                                                                              
      this.showmodal = false;                                                                                        
      if (data.isok) {                                                                                               
        if (data.index > -1) {                                                                                       
          this.$set(this.tabledata, data.index, data.dataFrom);                                                      
        } else {                                                                                                     
          this.reload();                                                                                             
        }                                                                                                            
      }                                                                                                              
      setTimeout(() => {                                                                                             
        this.mprops.hidefooter = false;                                                                              
      }, 500);                                                                                                       
    },                                                                                                               
  },                                                                                                                 
};                                                                                                                   
</script>                                                                                                            
<style scoped>                                                                                                       
.ivu-row {                                                                                                           
  margin-bottom: 10px;                                                                                               
}                                                                                                                    
.mb10 {                                                                                                              
  margin-bottom: 10px;                                                                                               
}                                                                                                                    
.ml10 {                                                                                                              
  margin-left: 10px;                                                                                                 
}                                                                                                                    
.ml5 {                                                                                                               
  margin-left: 5px;                                                                                                  
}                                                                                                                    
.card {                                                                                                              
  background-color: #fff;                                                                                            
  margin-top: 10px;                                                                                                  
  padding: 15px;                                                                                                     
  border-radius: 5px;                                                                                                
}                                                                                                                    
.btngrop {                                                                                                           
  text-align: right;                                                                                                 
  margin-right: 15px !important ;                                                                                    
}                                                                                                                    
</style>                                                                                                             
                                                                                                                     
            return sb.ToString();                                                                                    
        }                                                                                                            
    }                                                                                                                
}                                                                                                                    
